{% extends './layout/layout.html' %}

{% block content %}

<div class="container margin-top-20">
  <div class="row">
    <!-- 左侧 -->
    <div class="col-8">
      <h5 class="margin-bottom-10">基本信息</h5>
      <form id="change-user-info">
        <div class="form-group row">
          <label for="input-nick" class="col-sm-2 col-form-label">昵称</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input-nick" placeholder="请输入昵称" name="nickName"
              value="{{userInfo.nickName}}">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-city" class="col-sm-2 col-form-label">城市</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input-city" placeholder="请输入城市" name="city"
              value={{userInfo.city}}>
          </div>
        </div>
        <div class="form-group row">
          <label for="file-picture" class="col-sm-2 col-form-label">头像</label>
          <div class="col-sm-10">
            <img src={{userInfo.avatar}} style=" width: 100px; border-radius: 50%;" class="margin-bottom-10"
              id="img-picture" />
            <input type="file" class="form-control-file" name="file" accept="image/*" id="file-picture">
          </div>
        </div>
        <center><button type="submit" class="btn btn-primary" id="btn-submit-info">保存</button></center>
      </form>

      <hr />
      <h5 class="margin-bottom-10">修改密码</h5>
      <form>
        <div class="form-group row">
          <label for="input-cur-password" class="col-sm-2 col-form-label">当前密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-cur-password" placeholder="请输入当前密码">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-new-password" class="col-sm-2 col-form-label">新密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-new-password" placeholder="请输入新密码">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-new-password-repeat" class="col-sm-2 col-form-label">确认密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-new-password-repeat" placeholder="请输入确认密码">
          </div>
        </div>
        <center><button type="submit" class="btn btn-primary" id="btn-submit-password">提交</button></center>
      </form>

      <hr />
      <center><button class="btn btn-danger" id="btn-logout">退出登录</button></center>

    </div> <!-- 左侧结束 -->

    <!-- 右侧 -->
    <div class="col-4">
    </div> <!-- 右侧结束 -->
  </div>
</div>
{% endblock %}

{% block js %}
<script>
  const imgType = ['.jpg', '.png', '.svg', '.gif'];

  $("#file-picture").change(function () {
    // 获取上传文件
    const file = $(this)[0].files[0];
    // 获取扩展名
    const extendName = file.name.substring(file.name.lastIndexOf("."));
    // 判断扩展名是否符合要求
    let flag = false;
    for (let i = 0; i < imgType.length; i++) {
      if (extendName === imgType[i]) {
        flag = true; // 扩展名符合要求
        break; // 中止循环
      }
    }
    if (flag) {
      // 创建阅读器
      const reader = new FileReader();
      // 文件读取格式
      reader.readAsDataURL(file);
      // 读取完成
      reader.onload = function () {
        // this.result 读取后的结果
        const $url = this.result;
        $('#img-picture').attr("src", $url)
      }
    } else {
      alert("文件格式错误！")
    }

  })

  // 更改信息
  $('#change-user-info').submit(function (e) {
    e.preventDefault(); // 阻止默认行为

    // 创建表单对象： 将表单中的数据添加到表单对象中；
    const data = new FormData($(this)[0]);

    $.ajax({
      type: "post",
      url: "/api/user/changeUserInfo",
      data: data,
      contentType: false, // 不更改数据
      processData: false,
      success(res) {
        console.log(res)
      },
      error(err) {
        console.log(err)
      }
    })
  })

  // 更改密码
  $("#btn-submit-password").click(function (e) {
    //阻止默认行为
    e.preventDefault();

    const oldPassword = $("#input-cur-password").val();
    const newPassword = $("#input-new-password").val();
    const newRepeatPassword = $("#input-new-password-repeat").val();

    // 判断原密码与新密码是否重复
    if (oldPassword === newPassword) {
      alert("更改密码失败，原始密码与新密码相同！");
      return;
    }
    // 确认密码时，判断两次密码是否一致
    if (newPassword !== newRepeatPassword) {
      alert("更改密码失败，新密码两次输入值不匹配！");
      return;
    }

    // 发送数据
    ajax.post(
      "/api/user/changePassword",
      { oldPassword, newPassword },
      function (err, data) {
        if (err) {
          alert(err);
          return;
        }
        alert("修改密码成功！")
        // 清空表单
        $("#input-cur-password").val("");
        $("#input-new-password").val("");
        $("#input-new-password-repeat").val("");
      }
    )

  })
  // 退出登录
  $("#btn-logout").click(function () {
    if (confirm("您是否要退出登录？") == false) {
      return;
    }
    // 触发注销路由
    ajax.post(
      "/api/user/logout",
      function (err, data) {
        if (err) {
          alert(err);
          return;
        }
        alert("退出成功");
        location.href = "/login";
      }
    )
  })
</script>
{% endblock %}